import React, { PureComponent } from 'react';
import { Modal, Form, Input, Select, DatePicker, Divider } from 'antd';
import moment from 'moment';
import styles from './index.less';

const FormItem = Form.Item;
const { Option } = Select;

@Form.create()
class SendXcxTmpMsgModal extends PureComponent {
  state = {
    sendMsgType: 'send_test',
  };

  handleOk = e => {
    const { form, onOk } = this.props;
    e.preventDefault();
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        onOk(values);
        form.resetFields();
        this.setState({
          sendMsgType: 'send_test',
        });
      }
    });
  };

  handleCancel = () => {
    this.props.form.resetFields();
    this.props.onCancel();
    this.setState({
      sendMsgType: 'send_test',
    });
  };

  // 处理发送模式选择变化
  handleSendTypeChange = v => {
    this.setState({
      sendMsgType: v,
    });
  };

  disabledDate = current => {
    return current && current <= moment().endOf(moment);
  };

  render() {
    const { visible, form: { getFieldDecorator }, tmpMsg } = this.props;
    const { sendMsgType } = this.state;
    const { title, page, data, chineseStrs } = tmpMsg;
    const keywords = [];
    for (const i in data) {
      keywords.push(data[i]);
    }

    return (
      <Modal
        title="发送模板消息"
        visible={visible}
        style={{ top: 200 }}
        closable={false}
        cancelText="取消"
        okText="确定"
        onOk={this.handleOk}
        onCancel={this.handleCancel}
      >
        <div>
          发送效果: <span style={{ color: 'orange' }}>(如需修改,请重新设置模板)</span>
          <div className={styles.tmpMsgShow}>
            <p className={styles.title}>{title}</p>
            <p className={styles.date}>{moment().format('M月DD日')}</p>
            <div style={{ marginTop: 10, marginBottom: 10 }}>
              {keywords.map((value, key) => (
                <p key={key}>
                  {chineseStrs[key] === '' ? chineseStrs[key] : chineseStrs[key] + '：'}
                  <span style={{ color: value.color }}>{value.text}</span>
                </p>
              ))}
            </div>
            <Divider style={{ margin: 0 }} />
            <a href={page}>详情</a>
          </div>
          
          <Form layout="inline">
            <FormItem label="发送模式" style={{ marginBottom: 10 }}>
              {getFieldDecorator('send_type', { initialValue: 'send_test' })(
                <Select onChange={this.handleSendTypeChange}>
                  <Option value="send_test">测试发送</Option>
                  <Option value="send_now">立即发送</Option>
                  {/* <Option value="send_delay">定时发送</Option> */}
                </Select>
              )}
            </FormItem>
            <div>
              {sendMsgType === 'send_test' && (
                <FormItem label="测试openId">
                  {getFieldDecorator('test_openid', {
                    rules: [{ required: true, message: '请填写测试用户Id' }],
                  })(<Input />)}
                </FormItem>
              )}
              {sendMsgType === 'send_delay' && (
                <FormItem label="定时发送">
                  {getFieldDecorator('send_date', {
                    rules: [{ required: true, message: '请选择发送时间' }],
                  })(
                    <DatePicker
                      style={{ width: 180 }}
                      disabledDate={this.disabledDate}
                      showTime={{ format: 'HH:mm' }}
                      format="YYYY-MM-DD HH:mm:ss"
                      placeholder="选择时间"
                    />
                  )}
                </FormItem>
              )}
            </div>
          </Form>
        </div>
      </Modal>
    );
  }
}

export default SendXcxTmpMsgModal;
